<template>
  <div class="p-d">
    <div class="p-d b-f">
      <!-- <el-tabs v-model="activeName">
        <el-tab-pane label="字典管理" name="first">
        </el-tab-pane>
        <el-tab-pane label="态势字典" name="second">
        </el-tab-pane>
      </el-tabs> -->
      <div class="setting-page">
        <!-- <el-row class="bg-white search-content border-radius-8">
          <div class="form-box">
            <SearchComp :searchData="searchData" :searchForm="searchForm" :searchAction="searchHandle" />
          </div>
        </el-row> -->
        <div class="bg-white border-radius-8">
          <el-row type="flex" class="m-b" justify="space-between">
            <div>
              <el-button type="primary" @click="addField">添加字典</el-button>
            </div>
          </el-row>
          <TableCompEle v-loading="loading" :tableData="tableData" :tableAction="tableAction" :isSelect="false" :isIndex="true"
            :tableConfig="tableConfig" :isShowPage="true" :queryParams="queryParams" @getPagination="initField" />
        </div>
        <FieldDialog ref="fieldRef" @init="initField" />
      </div>
      <!-- <ChartsComp v-else /> -->
    </div>
  </div>
</template>

<script>
import FieldDialog from './fieldDialog.vue'
// import ChartsComp from './charts.vue'
// import { listName, list, change, deleteLabel } from '@/api/dict'
export default {
  components: {
    FieldDialog,
    // ChartsComp
  },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      tableConfig: [
        {
          prop: 'dictType',
          label: '属性名'
        },
        // {
        //   prop: 'dictTableName',
        //   label: '列表名称'
        // },
        {
          prop: 'dictValue',
          label: '值',
          width: 600
        },
        {
          prop: 'enableFlag',
          label: '状态',
          isType: 'Switch',
          method: row => {
            this.changeStatus(row)
          }
        }
      ],
      tableAction: {
        width: () => '260px',
        fixed: 'right',
        operations: [
          {
            // ifShow: () => this.power.codeUpdate,
            label: '修改',
            isLink: true,
            type: 'primary',
            method: row => {
              this.editField(row)
            }
          },
          {
            // ifShow: () => this.power.codeDel,
            label: '删除',
            type: 'danger',
            isLink: true,
            method: row => {
              this.dels(row)
            }
          },
          {
            // ifShow: () => this.power.codeUpdate,
            label: '启用',
            isLink: true,
            type: 'primary',
            method: row => {
              this.editField(row)
            }
          },
          {
            // ifShow: () => this.power.codeUpdate,
            label: '停用',
            isLink: true,
            type: 'primary',
            method: row => {
              this.editField(row)
            }
          },
          {
            // ifShow: () => this.power.codeUpdate,
            label: '导入',
            isLink: true,
            type: 'primary',
            method: row => {
              this.editField(row)
            }
          },
          {
            // ifShow: () => this.power.codeUpdate,
            label: '导出',
            isLink: true,
            type: 'primary',
            method: row => {
              this.editField(row)
            }
          },
        ]
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.paginationSize()
        },
        formData: [
          {
            type: 'Select',
            label: '列表名称:',
            prop: 'listName',
            filterable: true,
            clearable: true,
            placeholder: '请选择列表名称',
            options: [],
            params: { value: 'value', key: 'value' },
            change: () => this.paginationSize()
          }
        ]
      },
      searchHandle: [
        {
          label: '重置',
          handle: () => this.reset()
        }
      ],
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      searchData: {
        listName: null
      },
      loading: false
    }
  },
  created() {
    // this.initListName()
    this.initField()
  },
  methods: {
    // initListName() {
    //   listName()
    //     .then(res => {
    //       this.searchForm.formData[0].options = res.data
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    initField() {
      // this.loading = true
      // const params = {
      //   currentPage: this.queryParams.currentPage,
      //   pageSize: this.queryParams.pageSize,
      //   dictTableName: this.searchData.listName
      // }
      // list(params)
      //   .then(res => {
      let res = {
        "code": 200,
        "message": "操作成功",
        "data": {
          "pageSize": 10,
          "totalPage": 1,
          "total": 7,
          "list": [
            {
              "dictId": 60,
              "dictType": "学科领域",
              "dictTableName": "项目过程管理",
              "dictValue": "材料科学;生物学;物理学;基础医;药学;机器工程;其他;",
              "enableFlag": "y",
              "deleteFlag": "n",
              "dictArray": [
                '材料科学', '生物学', '物理学', '基础医', '药学', '机器工程', '其他'
              ],
            },
            {
              "dictId": 59,
              "dictType": "共享范围",
              "dictTableName": "标题",
              "dictValue": "全社会共享;全军共享;大单位共享;管理单位共享;不共享",
              "enableFlag": "y",
              "deleteFlag": "n",
              "dictArray": [
                '全社会共享', '全军共享', '大单位共享', '管理单位共享', '不共享'
              ],
            },
            {
              "dictId": 57,
              "dictType": "仪器分类",
              "dictTableName": "成果管理",
              "dictValue": "分析仪器;其他仪器;工艺试验仪器;物理性能测试仪器;电子测量仪器;计量仪器;医学科研仪器;特种检测仪器;海洋仪器",
              "enableFlag": "y",
              "deleteFlag": "n",
              "dictArray": [
                '分析仪器', '其他仪器', '工艺试验仪器', '物理性能测试仪器', '电子测量仪器', '计量仪器', '医学科研仪器', '海洋仪器'
              ],
            },
            {
              "dictId": 56,
              "dictType": "软件类型",
              "dictTableName": "成果管理",
              "dictValue": "软件系统;数据库;算法库;模型库",
              "enableFlag": "y",
              "deleteFlag": "n",
              "dictArray": [
                '软件系统', '数据库', '算法库', '模型库'
              ],
            },
            {
              "dictId": 55,
              "dictType": "软件来源",
              "dictTableName": "成果管理",
              "dictValue": "购置;自研;配发;其他",
              "enableFlag": "y",
              "deleteFlag": "n",
              "dictArray": [
                '购置', '自研', '配发', '其他'
              ],
            },
            {
              "dictId": 54,
              "dictType": "软件部署方式",
              "dictTableName": "成果管理",
              "dictValue": "单机;局域网;广域网",
              "enableFlag": "y",
              "deleteFlag": "n",
              "dictArray": [
                '单机', '局域网', '广域网'
              ],
            },
            {
              "dictId": 53,
              "dictType": "软件服务方式",
              "dictTableName": "成果管理",
              "dictValue": "本地部署;在线注册;委托服务",
              "enableFlag": "y",
              "deleteFlag": "n",
              "dictArray": [
                '本地部署', '在线注册', '委托服务'
              ],
            },
          ],
          "page": 1
        }
      }
      this.tableData = res.data.list.map(item => {
        item.enableFlag === 'y'
          ? (item.enableFlag = true)
          : (item.enableFlag = false)
        return item
      })
      this.queryParams.total = res.data.total
      // })
      // .catch(err => {
      //   console.log(err)
      // })
      // .finally(() => {
      //   this.initListName()
      //   this.loading = false
      // })
    },
    paginationSize() {
      this.queryParams.currentPage = 1
      this.initField()
    },
    reset() {
      this.searchData = {
        departmentName: null,
        departmentId: null,
        usersName: null,
        enableFlag: null,
        roleId: null
      }
      this.paginationSize()
    },
    addField() {
      const obj = {
        title: '添加字段',
        data: {}
      }
      this.$refs.fieldRef.show(obj)
    },
    editField(row) {
      const obj = {
        title: '修改字段',
        data: row
      }
      this.$refs.fieldRef.show(obj)
    },
    dels() {
      this.$confirm(`本操作将删除该用户，是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // deleteLabel({ dictIds: [row.dictId] }).then(() => {
          //   this.paginationSize()
          // })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    changeStatus(row) {
      this.$confirm(
        `本操作将${row.enableFlag ? '开启' : '关闭'}该用户，是否继续？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          // const params = {
          //   enableFlag: row.enableFlag ? 'y' : 'n',
          //   dictId: row.dictId
          // }
          // change(params).then(res => {
          //   if (res.code === 200) {
          //     this.$message.success('更改状态成功')
          //   }
          //   this.initField()
          // })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
          this.initField()
        })
    }
  }
}
</script>
